<template>
    <view class="content">
        <a-demo title="基础使用" desc="激活项自动居中">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick">
                <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="自动贴边吸附" desc="贴到最左边或最顶部">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick" edge>
                <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="只滚动到可见" desc="只将激活项滚动到可见状态，通常左贴边或右贴边">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick" visible>
                <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="禁用选项卡">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick">
                <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="index % 2 === 0">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="禁止滚动">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled>
                <pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="等分布局" desc="一般结合禁止滚动使用">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled class="pure-tabs-equal">
                <pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="两端对齐" desc="一般结合禁止滚动使用">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled class="pure-tabs-justify">
                <pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="换行布局" desc="一般结合禁止滚动使用">
            <pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled class="pure-tabs-wrap pure-tabs-equal">
                <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value">
                    <text class="item">{{ tab.name }}</text>
                </pure-tabs-item>
            </pure-tabs>
        </a-demo>

        <a-demo title="纵向布局">
            <view class="vertical">
                <view class="column">
                    <a-demo title="基础使用">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical>
                            <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column">
                    <a-demo title="贴边吸附">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" edge vertical>
                            <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column">
                    <a-demo title="只滚动到可见">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" visible vertical>
                            <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column">
                    <a-demo title="禁用选项卡">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical>
                            <pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="index % 2 === 0">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column">
                    <a-demo title="禁止滚动">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled vertical>
                            <pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column">
                    <a-demo title="等分布局">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical disabled class="pure-tabs-equal">
                            <pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column">
                    <a-demo title="两端对齐" desc="一般结合禁止滚动使用">
                        <pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical disabled class="pure-tabs-justify">
                            <pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
                                <text class="item">{{ tab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </a-demo>
                </view>
                <view class="column"></view>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";
    import { onReady } from "@dcloudio/uni-app";

    // tabs
    const tabs = ref([]);
    const tabValue = ref(1);

    // items
    const items = [
        { name: "前端", value: 1 },
        { name: "后端", value: 2 },
        { name: "Java", value: 3 },
        { name: "PHP", value: 4 },
        { name: "Python", value: 5 },
        { name: "Vue", value: 6 },
        { name: "React", value: 7 },
        { name: "CSS", value: 8 },
        { name: "HTML", value: 9 },
        { name: "JavaScript", value: 10 },
        { name: "C", value: 11 },
        { name: "C++", value: 12 },
        { name: "C#", value: 13 },
    ];

    // 初始化
    onReady(() => {
        initTabsData();
    });

    // 初始化 tabs 数据
    function initTabsData() {
        // 模拟异步获取数据
        let timer = setTimeout(() => {
            tabs.value = items;
            clearTimeout(timer);
            timer = null;
        }, 100);
    }

    // Tab点击事件
    function handleTabClick(item) {
        console.log("Tab点击事件", item);
        // 更新绑定值
        tabValue.value = item.value;
    }
</script>

<style>
    .item {
        display: flex;
        padding: 0.75em 1.5em;
        white-space: nowrap;
    }

    .vertical {
        --pure-tabs-height: 400px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .columns .item-name {
        width: 70px;
        white-space: normal;
    }
</style>
